<template>

  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>属性列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="box-card">
    <div>
      <el-alert title="分类属性只可以选择最后一级" type="warning"/>
      <span class="attr_title">选择分类</span>
      <el-cascader
          v-model="options.selectID"
          :options="options.data"
          :props="props"
          separator="  >  "
          clearable
          style="width: 500px"
          @change="changeSelect"
      />
    </div>
    <div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="静态属性" name="static">
          <el-button type="primary" @click="addDialogVisible=true" :disabled="isButtonVisible">添加属性</el-button>
          <el-table :data="attrData.static">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="属性名称" prop="name"></el-table-column>
            <el-table-column label="属性值" prop="val"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="动态属性" name="dynamic">
          <el-button type="primary" @click="addDialogVisible=true" :disabled="isButtonVisible">添加属性</el-button>
          <el-table :data="attrData.dynamic" row-key="id">
            <el-table-column type="expand">
              <template #default="scope">
                <el-tag class="e-tag" v-for="(item,i) in scope.row.val" :key="scope.row.id" closable @close="closeTag(scope.row.id,scope.row.val,i)">{{ item }}</el-tag>
                <TagComponent @addTagEvent="getTagVal" :row="scope.row"></TagComponent>
              </template>
            </el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="属性名称" prop="name"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>

  <el-dialog :title="dialogTitle" width="30%" v-model="addDialogVisible" :before-close="addDialogClose">
    <el-form :model="addForm" label-width="80px" :rules="addRules" ref="addRef">
      <el-form-item label="属性名称" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addAttr">确定</el-button>
        <el-button @click="addDialogVisible=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>

import {ArrowRight} from "@element-plus/icons-vue";
import {reactive, ref, onMounted, computed,} from "vue";
import api from "@/api";
import TagComponent from "@/components/TagComponent.vue";
import {ElMessage} from "element-plus";

const options = reactive({
  data: [],
  selectID: ''
})
const props = {
  expandTrigger: 'hover',
  label: 'name',
  value: 'id',
}
const activeName = ref('static')
const attrData = reactive({
  static: [],
  dynamic: []
})
const flag = reactive({
  static: false,  //静态属性不可以获取
  dynamic: false  //动态属性不可以获取
})
const addForm = reactive({
  name: '',
})
const addDialogVisible = ref(false)
const dialogTitle = ref('添加静态属性')
const addRules = reactive({
  name: [
    {required: true, message: '请输入属性名称', trigger: 'blur'},
    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}]
})
const addRef = ref(null)
let isButtonVisible = computed(() => {
  //根据级联选择器的值，判断是否可以使用按钮
  if (options.selectID) {
    if (options.selectID.length === 3) {
      return false
    }
  }
  return true
})

onMounted(() => {
  get_category()
})

const get_category = () => {
  api.get_category(3).then(res => {
    options.data = res.data.data
  })
}

const handleClick = (tab, event) => {
  dialogTitle.value = tab.props.name === 'static' ? '添加静态属性' : '添加动态属性'
  if (options.selectID) {
    if (options.selectID.length === 3) {
      let selectKey = options.selectID[2]
      let _type = tab.props.name
      //根据flag标识判断是否获取数据
      if (_type === 'static' && !flag.static) return
      if (_type === 'dynamic' && !flag.dynamic) return
      get_attr(selectKey, _type)
    }
  }
}

const changeSelect = (value) => {
  if (value) {
    if (value.length === 3) {
      let selectKey = value[2]
      let _type = activeName.value
      //设置静态属性可以获取
      flag.static = true
      //设置动态属性可以获取
      flag.dynamic = true
      get_attr(selectKey, _type)
    } else {
      attrData.static = []
      attrData.dynamic = []
    }
  } else {
    attrData.static = []
    attrData.dynamic = []
  }
}

const get_attr = (s_key, s_type) => {
  if (s_type === 'static') {
    api.get_attr_by_category(s_key, s_type).then(res => {
      attrData.static = res.data.data
      //设置静态属性不可以获取
      flag.static = false
    })
  } else if (s_type === 'dynamic') {
    api.get_attr_by_category(s_key, s_type).then(res => {
      res.data.data.forEach(item => {
        item.val = item.val ? item.val.split(',') : []
      })
      attrData.dynamic = res.data.data
      //设置动态属性不可以获取
      flag.dynamic = false
    })
  }
}
const addDialogClose = () => {
  addRef.value.resetFields()
  addDialogVisible.value = false
}

const addAttr = () => {
  let params = {
    'name': addForm.name,
    '_type': activeName.value,
    'cid': options.selectID[2]
  }
  api.add_attr(params).then(res => {
    get_attr(options.selectID[2], activeName.value)
    addDialogClose()
  })
}

const getTagVal = (val) => {
  if (val.inputValue) {//将新输入的值添加到属性值中
    val.row.val.push(val.inputValue)
    //封装接口所需参数
    let params = {
      '_type': activeName.value,
      'val': val.row.val.join(','),
    }
    //调用接口
    api.update_attr_value(val.row.id, params).then(res => {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      })
    })
  }
}

const closeTag = (id, tagList, i)=>{
  //在列表中删除指定的数据
  tagList.splice(i,1)
  //封装接口所需参数
  let params = {
    val : tagList.join(',')
  }
  api.update_attr_value(id,params).then(res=>{
    ElMessage({
      message: res.data.msg,
      type: 'success',
    })
  })
}

</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.attr_title {
  margin-right: 10px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.e-tag {
  margin: 5px;
}

</style>